<template>
  <div id="license-issuance" style="height: 100%"></div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [{
        date: 2019,
        qy: 0,
        gth: 0,
        shzz: 0
      }, {
        date: 2020,
        qy: 389,
        gth: 908,
        shzz: 1800
      }, {
        date: 2021,
        qy: 2898,
        gth: 1908,
        shzz: 3900
      }]
    }
  },
  mounted() {
    this.getData()
  },
  created() {},
  methods: {
    // 获取数据
    getData() {
      this.$get('/foodsafety/getEnterprise').then(res => {
        this.dataList = res.data
        this.renderEcharts(res.data)
      })
    },
    renderEcharts(data) {
      let myChart = this.$echarts.init(document.getElementById('license-issuance'))
      var option
      option = {
        tooltip: {
          trigger: "item",
          backgroundColor: "#404C73",
          borderColor: "#404C73",
          textStyle: {
            color: '#FFF', // 文字的颜色
          }
        },
        legend: {
          show: true,
          top: "center",
          left: "left",
          orient: 'vertical',
          textStyle: {color: '#fff'}
        },
        series: [
          {
            name: "单位性质分类",
            type: "pie",
            center: ["65%", "50%"],
            radius: ["30%", "70%"],
            roseType: 'radius',
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "inside",
              color: '#fff',
              formatter: '{c} ({d}%)',
              fontWeight: 700
            },
            emphasis: { // 设置高亮时显示标签
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
              scale: true, // 设置高亮时放大图形
              scaleSize: 15
            },
            labelLine: {
              show: false,
            },
            data: data
          },
        ],
      };

      myChart.setOption(option)
    },
  },
}
</script>
